<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="tabs">
			<u-tabs :current="status" @click="onChangeTabs" :scrollable="false" :list="tabs"></u-tabs>
		</view>
		<!-- 列表 -->
		<view class="order" v-if="order.length > 0">
			<view class="item" v-for="(item,index) in order" :key="index">
				<view class="tips" :class="item.status==0?'error':'success'">{{ item.status == 0?'未支付':'已支付' }}</view>
				<view class="header">
					<view class="title">{{ item.applet.name }}</view>
				</view>
				<view class="content">
					<view class="line">
						<view class="label">唯一标识</view>
						<view class="value">{{ item.applet.appid }}</view>
					</view>
					<view class="line">
						<view class="label">备案状态</view>
						<view class="value">
							<block v-if="item.applet.status == 2">
								平台审核中
							</block>
							<block v-else-if="item.applet.status == 3">
								平台审核驳回
							</block>
							<block v-else-if="item.applet.status == 4">
								管局审核中
							</block>
							<block v-else-if="item.applet.status == 5">
								管局审核驳回
							</block>
							<block v-else-if="item.applet.status == 6">
								已备案
							</block>
							<block v-else-if="item.applet.status == 1024">
								未备案
							</block>
							<block v-else-if="item.applet.status == 1025">
								未备案 && 小程序基本信息未填
							</block>
							<block v-else-if="item.applet.status == 1026">
								未备案 && 小程序类目未填
							</block>
							<block v-else-if="item.applet.status == 1027">
								未备案 8& 小程序基本信息未填 8& 小程序类目未填
							</block>
							<block v-else>
								未知状态
							</block>
						</view>
					</view>
					<view class="line">
						<view class="label">订单编号</view>
						<view class="value">{{ item.order_no }}</view>
					</view>
					<view class="line">
						<view class="label">创建时间</view>
						<view class="value">{{ item.create_at }}</view>
					</view>
				</view>
				<view class="btns">
					<view class="btn" v-if="item.applet.status == 3||item.applet.status == 5">
						官方反馈
					</view>
					<view class="btn" @click="onViewSubject(item.applet.company_id,item.applet.id)">
						查看主体
					</view>
					<view @click="onAgainRequest(item.applet.id)" class="btn"
						v-if=" item.applet.status != 2&&item.applet.status!=4&&item.applet.status!=6">
						发起备案
					</view>
					<view class="btn" @click="onViewPrincipal(item.applet.principal_id,item.applet.id)">
						负责人
					</view>
					<view class="btn" @click="onPayment(item)" v-if="item.status == 0">
						订单支付
					</view>
				</view>
			</view>
		</view>

		<block v-else>
			<u-empty text="暂无更多数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</block>
		<u-popup :show="show" @close="show=false" customStyle='padding:40rpx;max-height:50vh;overflow-y: auto;'>
			<view style="background-color: #FFFFFF;">
				<view class="error-msg" v-for='(item,index) in errorData'>
					<view style="color: #FFFFFF;font-size: 13px;">{{item.errmsg}}</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		lists
	} from "@/api/order.js";
	import {
		againIcp
	} from "@/api/applet.js";
	export default {
		data() {
			return {
				show: false,
				page: 1,
				status: 0,
				is_reach: false,
				last_page: 1,
				errorData: [],
				order: [],
				tabs: [{
					name: '全部备案',
					status: 0
				}, {
					name: '未支付',
					status: 1
				}, {
					name: '进行中',
					status: 2
				}, {
					name: '已备案',
					status: 3
				}]
			};
		},
		onLoad(options) {
			if (options.status) {
				this.status = options.status
			}
			this.onGetOrder()
		},
		onReachBottom() {
			let _this = this
			if (_this.last_page >= _this.page) {
				return false;
			}
			_this.is_reach = true
			_this.page = _this.page + 1
			_this.onGetOrder()
		},
		methods: {
			onChangeTabs(e) {
				this.status = e.status
				this.page = 1;
				this.onGetOrder()
			},
			onAgainRequest(applet_id) {
				let _this = this
				uni.showLoading({
					title: '请求中...'
				})
				againIcp({
					id: applet_id
				}).then(res => {
					if (res.code == 200) {
						let result = res.data
						console.log(result)
						if (result.errcode == 0) {
							_this.$refs.uToast.show({
								type: 'success',
								message: res.msg,
								complete() {
									_this.onGetOrder()
								}
							})
						} else {
							_this.errorData = result.hints

							_this.show = true
						}
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})

			},
			onPayment(order) {
				uni.navigateTo({
					url: '/pages/cashier/index/index?applet_id=' + order.app_id + '&price=' +
						order.price + '&order_no=' + order.order_no + '&order_id=' + order.id
				})
			},
			onViewPrincipal(principal_id, applet_id) {
				uni.navigateTo({
					url: '/pages/charge/form/index?nature_value=&id=' + principal_id +
						'&applet_id=' + applet_id
				})
			},
			onViewSubject(company_id, applet_id) {
				uni.navigateTo({
					url: '/pages/subject/form/index?id=' + company_id + "&applet_id=" + applet_id
				})
			},
			onGetOrder() {
				let _this = this
				lists({
					page: _this.page,
					limit: 15,
					status: _this.status,
					name: _this.search
				}).then(res => {
					_this.last_page = res.data.last_page
					if (_this.is_reach) {
						_this.order = [..._this.order, ...res.data.data]
					} else {
						_this.order = res.data.data
					}
					_this.is_reach = false
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 160rpx;
	}

	.submit {
		width: 100%;
		position: fixed;
		bottom: 30rpx;

		.btn {
			width: 90%;
			margin: 30rpx auto;

			.u-button {
				height: 100rpx;
			}
		}
	}

	.order {
		width: 92%;
		margin: 0 auto;


		.item {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 15rpx 30rpx;
			margin: 15rpx 0rpx;
			border-radius: 10rpx;
			position: relative;
			overflow: hidden;

			.tips {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				background-color: #18b566;
				color: #fff;
				padding: 10rpx;
				border-radius: 0rpx 0rpx 0rpx 10rpx;
			}

			.tips.Warning {
				background-color: #ff9900;
			}

			.tips.error {
				background-color: #fa3534;
			}

			.tips.success {
				background-color: #19be6b;
			}

			.header {
				.title {
					font-size: 32rpx;
					font-weight: bolder;
				}

				margin-bottom: 10rpx;
			}

			.content {
				display: flex;
				flex-direction: column;

				.line {
					display: flex;
					flex-direction: row;
					margin: 10rpx 0rpx;

					.label {
						margin-right: 30rpx;
						min-width: 130rpx;
						color: #82848a;
					}

					.value {
						color: #303133;
					}
				}
			}

			.btns {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				align-content: center;
				margin-top: 10rpx;
				border-top: 1rpx solid #e7e6e4;

				.btn {
					text-align: center;
					width: 50%;
					height: 81rpx;
					line-height: 81rpx;
					border-right: 1rpx solid #e7e6e4;
				}

				.btn:last-child {
					border-right: none
				}
			}
		}
	}

	.tabs {
		background-color: #fff;
		padding-bottom: 15rpx;
	}

	.error-msg {
		border-radius: 10rpx;
		min-height: 80rpx;
		padding: 20rpx;
		background-color: #dd6161;
		margin-top: 20rpx;
	}
</style>